<template>
  <view class="live-container">
    <!-- 使用video组件观看直播 -->
    <video
      :src="pullurl"
      style="width: 100vw; height: 100vh"
      :controls="false"
      object-fit="contain"
      loop
      :is-live="true"
      :autoplay="true"
      :show-center-play-btn="true"
      :enable-progress-gesture="true"
      :show-fullscreen-btn="true"
      @error="onPlayError"
      @play="onVideoPlay"
      @pause="onVideoPause"
    ></video>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        pullurl: '',
      };
    },
    onLoad(e) {
      this.pullurl = e.pullurl;
    },
    methods: {
      onPlayError(e) {
        console.error('直播播放错误:', e);
        // 打印更详细的错误信息
        if (e && e.detail) {
          console.error('错误详情:', JSON.stringify(e.detail));
        }
        uni.showToast({
          title: '播放出错，请稍后重试',
          icon: 'none',
          duration: 3000,
        });

        // 尝试重新加载视频
        setTimeout(() => {
          console.log('尝试重新加载视频');
          // 可以在这里添加重新加载逻辑
        }, 3000);
      },
      onVideoPlay(e) {
        console.log('视频开始播放', e);
      },
      onVideoPause(e) {
        console.log('视频暂停播放', e);
      },
    },
  };
</script>

<style lang="scss" scoped>
  .live-container {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  video {
    background-color: #000;
  }

  .debug-info {
    margin-top: 10px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 12px;
    width: 300px;
    word-break: break-all;
  }
</style>
